<template>
  <div class="header">

    <img src="../assets/logo.svg" width="30" height="30"/>
    <div class="title"> 东软颐养中心管理系统</div>
    <div class="userinfo">
      <img :src="touxiang"/>
      <el-dropdown placement="bottom">
        <el-button> {{ userStore.getUserInfo?.nickname }}↓</el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="userProfile">用户设置</el-dropdown-item>
            <el-dropdown-item @click="logout">退出</el-dropdown-item>

          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup name="LayoutHeader">
import {useUserStore} from "@/stores/userStore.js";
import {useRouter} from "vue-router";
import {logout} from '@/utils/auth.js'

const userStore = useUserStore();

console.log("import.meta.env", import.meta.env)
const api_url = import.meta.env.VITE_API_SERVER

// touxiang = `http://localhost:8080/downlod/4`
const touxiang = `${api_url}/downlod/${userStore.getUserInfo?.avatar}`

const router = useRouter();

// console.log('userStore',userStore)
// userStore.loadUserInfo()
//
// function logout() {
//   router.replace({path: '/login'})
// }

//跳转到 用户设置页面
const userProfile = () => {
  router.replace({path: '/user_profile'})
}
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
}

.header .title {
  font-family: "Microsoft YaHei";
  font-size: 1.5em;
  font-weight: bolder;
  flex: 1;
}

.header .userinfo {
  float: right;
  display: flex;
  width: 200px;
  justify-content: space-between;
  align-items: center;
}

.userinfo img {
  height: 50px;
  width: 50px;
  border-radius: 25px;

}


</style>